<template>
	<view class="content-tabar" style="">
		<view class="top20"></view>
		<view class="bosy">
			<view class="bosy-gou-not" v-if="cartList.length==0">
				<view class="bosy-gou-not-title">购物车</view>
				<view class="flex-column bosy-gou-not-detal">
					<image src="../../static/cart/nothas.png" mode="scaleToFill"></image>
					<view>暂无商品，去逛逛吧</view>
					<view @tap="qugg">去逛逛</view>
				</view>
			</view>
			<view class="bosy-gou-has" v-if="cartList.length>0">
				<view class="bosy-gou-has-body">
					<view class="flex-row flex-content-between flex-item-center">
						<view class="flex-row bosy-gou-has-header">
							<view>购物车</view>
							<view>（{{cartList.length}}件）</view>
						</view>
						<view class="hds">
							<image @tap="changeType" v-if="is_del==false" class="bosy-gou-has-header-img"
								src="../../static/cart/sc.png" mode="scaleToFill"></image>
							<view @tap="changeType" class="wc" v-if="is_del==true">完成</view>
						</view>

					</view>
					<view class="bosy-gou-has-cen">
						<!-- <scroll-view :scroll-y="true" class="scrollclass"> -->
							<view >
							<view v-for="(cart,index) in cartList" class="flex-row flex-content-between ones">
								<view class="flex-row">
									<image @tap="change(index)" class="bosy-gou-has-cen-img1"
										:src="cart.selected?`../../static/cart/has.png`:`../../static/cart/nohas.png`"
										mode="scaleToFill"></image>
									<image class="bosy-gou-has-cen-img2" :src="$utils.cdnImg(cart.goodsitem.image)"
										mode="scaleToFill"></image>
									<view class="flex-column left20">
										<view class="bosy-gou-has-cen-txt1">{{cart.goodsitem.title}}</view>
										<view class="flex-row" v-if="cart.tags&&cart.tags.length>0">
											<view class="tag" v-for="tag in cart.tags">{{tag.title}}</view>
										</view>
										<view :class="cart.tags&&cart.tags.length==0?`bosy-gou-has-cen-txt2`:`bosy-gou-has-cen-txt2-1`">￥{{cart.goodsitem.price}}</view>
									</view>
								</view>
								<view class="flex-column-reverse">
									<view class="flex-row flex-content-end">
										<image class="bosy-gou-has-cen-img3" @tap="delCard(index)" src="../../static/order/jian.png"
											mode="scaleToFill"></image>
										<view class="bosy-gou-has-cen-num">{{cart.num}}</view>
										<image class="bosy-gou-has-cen-img3" @tap="addCard(index)" src="../../static/order/jia.png"
											mode="scaleToFill"></image>
									</view>
								</view>
							
							</view>
						<!-- </scroll-view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="flex-row cnxh">
				<view></view>
				<view>猜你喜欢</view>
				<view></view>
			</view>
			<view class="xhgoods flex-row flex-content-between flex-wrap">
				<view class="flex-column ones-c" v-for="it in cnxhList"  @tap="goodsinfo(it.id)">
					<image class="foot-img1" :src="$utils.cdnImg(it.image)" mode="widthFix"></image>
					<view class="foot-text1">{{it.title}}</view>
					<view class="flex-row tags-view">
						<view v-for="tag in it.tags" class="tag">{{tag.title}}</view>
					</view>
					<view class="flex-row flex-content-between flex-item-center">
						<view class="flex-row foot-text2">
							<view>￥</view>
							<view>{{it.price}}</view>
							<view>￥{{it.original_price}}</view>
						</view>
						<image @tap.stop="jiaCard(it.goodsitem,it)" class="foot-img2" src="../../static/index/gwc.png" mode="scaleToFill"></image>
					</view>
					<view v-if="it.score>0" class="jifen">送{{parseInt(it.score)}}积分</view>
				</view>
				
				
				
			</view>
		</view>
		<!-- #ifdef H5 -->
		<mu-suspension bottom="101">
			<view class="bottom">
			<view class="top20"></view>
				<view class="flex-row flex-content-between jieusnas">
					<view class="flex-row flex-content-center flex-item-center xiatiao">
						<image class="bottom-img1" @tap="allActives" :src="all_active?`../../static/order/ok.png`:`../../static/order/not.png`" mode="scaleToFill"></image>
						<view>全选</view>
						<view v-if="is_del==false">合计:</view>
						<view v-if="is_del==false">￥{{allMoney}}</view>
					</view>
					<view class="jiesuna" @tap="submit">{{is_del?`删除`:`结算`}}</view>
				</view>
			</view>
		</mu-suspension>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<mu-suspension bottom="0">
			<view class="bottom">
			<view class="top20"></view>
				<view class="flex-row flex-content-between jieusnas">
					<view class="flex-row flex-content-center flex-item-center xiatiao">
						<image class="bottom-img1" @tap="allActives" :src="all_active?`../../static/order/ok.png`:`../../static/order/not.png`" mode="scaleToFill"></image>
						<view>全选</view>
						<view v-if="is_del==false">合计:</view>
						<view v-if="is_del==false">￥{{allMoney}}</view>
					</view>
					<view class="jiesuna" @tap="submit">{{is_del?`删除`:`结算`}}</view>
				</view>
			</view>
		</mu-suspension>
		<!-- #endif -->
		<attr ref="gouwuces" :attrList="attrList" @confirm="confirm"></attr>
	</view>
</template>

<script>
	import attr from "@/components/attr.vue"
	export default {
		components:{
			attr
		},
		data() {
			return {
				attrList:[],
				goodsInfo:null,
				page:1,
				cnxhList:[
					// "",
					// "",
					// "",
					// "",
				],//猜你喜欢列表
				is_del: false,//是否删除模式
				all_active:false,//是否全选
				has:false,
				// cartList: [ //购物车列表
					
				// 	// {
				// 	// 	selected: false
				// 	// },
				// 	// {
				// 	// 	selected: true
				// 	// },
				// 	// {
				// 	// 	selected: true
				// 	// },
				// 	// {
				// 	// 	selected: true
				// 	// },
				// 	// {
				// 	// 	selected: true
				// 	// }

				// ], //购物车商品列表
			}
		},
		computed:{
			cartList(){
				return this.$store.state.shopcart.cartList
			},
			all_active(){
				// console.log(this.$store.getters);
				return this.$store.getters.all_active
			},
			allMoney(){
				return this.$store.state.shopcart.allMoney
			}
		},
		onLoad() {
			let token = uni.getStorageSync("token")
			if(token){
				this.$store.dispatch("getCartList")
			}
			
			this.getLikes();
		},
		onPullDownRefresh() {
			this.page = 1
			this.cnxhList = []
			this.getLikes(()=>{
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			//减少购物车
			delCard(index){
				let that = this;
				this.$utils.delayedHand(()=>{
					that.changeCard(index)
				})
				let cartList = this.cartList;
				let cartInfo = cartList[index];
				if(cartInfo.num>1){
					cartInfo.num--;
				}
				cartList[index] = cartInfo;
				this.cartList = cartList;
				this.$store.dispatch("changeMoney")
			},
			//添加购物车
			addCard(index){
				let that = this;
				this.$utils.delayedHand(()=>{
					that.changeCard(index)
				})
				let cartList = this.cartList;
				let cartInfo = cartList[index];
				cartInfo.num++;
				cartList[index] = cartInfo;
				this.cartList = cartList;
				this.$store.dispatch("changeMoney")
			},
			//修改购物车
			changeCard(index,type){
				// console.log(index);
				let cartList = this.cartList;
				// console.log(cartList[index]);
				let data = {
					cart:[
						{
							mumerchant_goods_id:cartList[index].mumerchant_goods_id,
							mumerchant_goods_item_id:cartList[index].mumerchant_goods_item_id,
							num:cartList[index].num
						}
					],
					type:"num"
				}
				let that = this;
				this.$api.changeShopCart(data).then(res=>{
					that.$store.dispatch("getCartList")
					// that.$utils.showMessage("添加购物车成功")
				})
			},
			//加入购物车
			confirm(e){
				let that = this;
				let data = {
					cart:[
						{
							mumerchant_goods_id:this.goodsInfo.id,
							mumerchant_goods_item_id:e.data.id,
							num:e.num
						}
					],
					type:'add'
				}
				this.$api.changeShopCart(data).then(res=>{
					that.$store.dispatch("getCartList")
					that.$utils.showMessage("添加到购物车成功")
				})
			},
			//获取猜您喜欢
			getLikes(callback){
				let page = this.page;
				if(page==0){
					return
				}
				let that = this;
				this.$api.getGoodsList({
					is_like:1,
				},false).then(res=>{
					console.log(res);
					that.cnxhList = res;
				}).finally(()=>{
					if(typeof callback == 'function'){
						callback()
					}
				})
			},
			//点击去逛逛
			qugg(){
				console.log("点击去逛逛");
				uni.switchTab({
					url:"/pages/tabbar/classify"
				})
			},
			jiaCard(goodsitem,goodsInfo){
				this.attrList = goodsitem
				this.goodsInfo = goodsInfo
				this.$refs.gouwuces.open()
			},
			change(index){
				this.$store.dispatch("countAllMoney",index)
			},
			//修改结算状态
			changeType() {
				this.is_del = !this.is_del
			},
			//结算事件
			submit(){
				var is_del = this.is_del;
				if(is_del){
					this.deleteCart()
				}else{
					this.gotopay()
				}
			},
			//删除购物车
			deleteCart(){
				let cartList = this.cartList;
				// console.log(cartList);
				let that = this;
				let goods = []
				if(cartList.length>0){
					cartList.forEach(item=>{
						if(item&&item.selected&&item.selected==true){
							goods.push(item.id)
						}
					})
				}
				if(goods.length==0){
					this.$utils.showMessage("没有选择任何数据")
					return
				}
				uni.showModal({
					title:"提示",
					content:"确定要删除购物车?",
					success(ress){
						if(ress.confirm){
							that.$api.delShopCart({
								cart_ids:goods
							}).then(res=>{
								that.$store.dispatch("getCartList");
							})
						}
					}
				})
				
			},
			//去结算
			gotopay(){
				let cartList = this.cartList;
				console.log(cartList);
				let data = []
				cartList.forEach(item=>{
					if(item.selected==true){
						data.push({
							mumerchant_goods_id:item.mumerchant_goods_id,
							mumerchant_goods_item_id:item.mumerchant_goods_item_id,
							num:item.num
						})
					}
				})
				if(data.length==0){
					this.$utils.showMessage("请选择要支付的商品")
					return
				}
				// console.log(data);
				uni.navigateTo({
					url:'/pages/order/create_order?goods_info='+encodeURIComponent(JSON.stringify(data))+"&is_shop_cart=1"
				})
			},
			//跳转到商品详情
			goodsinfo(id){
				uni.navigateTo({
					url:'/pages/goods/goods_info?goods_type=0&id='+id
				})
			},
			//点击全选
			allActives(){
				this.$store.dispatch("clckAllActive")
			}
		}
	}
</script>

<style lang="scss">
	.jifen{
		font-size: 14rpx;
		color: #00aa7f;
		margin-left: 5rpx;
	}
	.tags-view{
		height: 38rpx;
	}
	.tag{
		height: 38rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1px solid #FF5000;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF5000;
		margin-right: 5rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
		margin-top: 10rpx;
	}
	.scrollclass{
		// width: 690rpx;
		height: 547rpx;
	}
	.ones-c{
		margin-top: 46rpx;
	}
	.xiatiao{
		margin-top: 17rpx;
		>view:nth-child(2){
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 20rpx;
		}
		>view:nth-child(3){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 20rpx;
		}
		>view:nth-child(4){
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FF5000;
			margin-left: 20rpx;
		}
	}
	.bottom-img1{
		width: 32rpx;
		height: 32rpx;
		margin-left: 30rpx;
	}
	.jiesuna{
		width: 180rpx;
		height: 70rpx;
		background: linear-gradient(88deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 70rpx;
		margin-right: 30rpx;
	}
	.bottom{
		width: 750rpx;
		height: 110rpx;
		background-color: #FFFFFF;
	}
	.foot-text2{
		margin-top: 20rpx;
		>view:nth-child(1){
			font-size: 22rpx;
			font-family: DIN-Regular, DIN;
			font-weight: 400;
			color: #FF5000;
			margin-top: 12rpx;
		}
		>view:nth-child(2){
			font-size: 34rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #FF5000;
		}
		>view:nth-child(3){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			text-decoration: line-through;
			margin-left: 16rpx;
		}
	}
	.foot-img2{
		width: 44rpx;
		height: 44rpx;
		margin-top: 20rpx;
	}
	.foot-text1{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;
	}
	.foot-img1{
		width: 335rpx;
	}
	.xhgoods{
		width: 690rpx;
		// height: 200rpx;
		// background-color: #FFFFFF;
		margin-bottom: 202rpx;
	}
	.cnxh{
		margin-top: 46rpx;
		margin-bottom: 30rpx;
		margin-left: 186rpx;
		>view:nth-child(1){
			width: 75rpx;
			height: 0px;
			opacity: 1;
			border-bottom: 1rpx solid #707070;
			margin-top: 20rpx;
			margin-left: 20rpx;
		}
		>view:nth-child(2){
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 20rpx;
		}
		>view:nth-child(3){
			width: 75rpx;
			height: 0px;
			opacity: 1;
			border-bottom: 1rpx solid #707070;
			margin-top: 20rpx;
		}
	}
	.wc {
		font-size: 27rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 7rpx;
		margin-right: 30rpx;
	}

	.bosy-gou-has-cen-num {
		width: 70rpx;
		height: 50rpx;
		background: #F3F3F3;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		text-align: center;
		margin-left: 14rpx;
	}

	.left20 {
		margin-left: 20rpx;
	}

	.bosy-gou-has-cen-txt1 {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.bosy-gou-has-cen-txt2-1{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 20rpx;
	}
	.bosy-gou-has-cen-txt2 {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 70rpx;
	}

	.ones {
		margin-top: 41rpx;
		margin-bottom: 10rpx;
	}

	.bosy-gou-has-cen-img2 {
		// width: 172rpx;
		height: 172rpx;
		width: 172rpx;
		margin-left: 21rpx;
	}

	.bosy-gou-has-cen-img3 {
		width: 50rpx;
		height: 50rpx;
		margin-left: 14rpx;
	}

	.bosy-gou-has-cen-img1 {
		width: 32rpx;
		height: 32rpx;
	}

	.bosy-gou-has-cen {
		// height: 172rpx; 
		margin-top: 41rpx;
	}

	.bosy-gou-has-header-img {
		width: 28rpx;
		height: 28rpx;
		margin-top: 7rpx;
		margin-right: 30rpx;
	}

	.bosy-gou-has-header {
		>view:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		>view:nth-child(2) {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			// margin-left: ;
		}
	}

	.bosy-gou-has-body {
		margin-left: 20rpx;
		padding-top: 33rpx;
		background-color: #FFFFFF;
	}

	.bosy-gou-has {
		width: 690rpx;
		// height: 547rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		padding-bottom: 40rpx;
	}

	.bosy-gou-not-detal {
		margin-left: 20rpx;
		margin-right: 20rpx;

		>image {
			width: 260rpx;
			height: 260rpx;
			margin-left: 216rpx;
			margin-top: 50rpx;
		}

		>view:nth-child(2) {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			text-align: center;
		}

		>view:nth-child(3) {
			width: 400rpx;
			height: 90rpx;
			background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
			margin-top: 91rpx;
			margin-left: 135rpx;
		}
	}

	.bosy-gou-not-title {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
		padding-top: 30rpx;
	}

	.bosy-gou-not {
		width: 690rpx;
		// height: 670rpx;
		height: 660rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		padding-bottom: 72rpx;
	}

	.bosy {
		width: 690rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 100rpx;
	}
</style>